<template>
	<view class="main_container">
		<view class="bg_img" @click="to_post">
			<view class="message">
				<u-text :text="message" color="#0a235c" size="14" lines="3" lineHeight="19px"/>
				<u-scroll-list v-if="image_src_list.length">
					<view v-for="image_src in image_src_list" style="padding-right: 10px; padding-top: 5px;">
						<u-image width="32vw" height="20vw" radius="5px" :src="image_src"></u-image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view style="height: 10px;" />
			<u-row customStyle="padding-left: 5vw; padding-right: 5vw" justify="space-around">
				<u-col span="1">
					<u--image :src="user.avatar_url" width="40px" height="40px" shape="square" radius="15" />
				</u-col>
				<u-col span="10">
					<view class="bg_img2">
						<u-row>
							<u-col span="10">
								<view> {{user.nickname}} </view>
							</u-col>
							<u-col span="1" @click="del" v-if="is_own">
								<!-- <u-icon name="trash" size="large" v-if="is_own"></u-icon> -->
								<view style="padding: 3px;">
									<u-image width="39px" height="39px" src="/static/icons/del.png"></u-image>
								</view>
							</u-col>
						</u-row>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	// const test_posts = require('@/static/test-posts.json')
	export default {
		props: {
			post: Number,
			is_own: Boolean
		},
		name:"post_message",
		data() {
			return {
				message: "",
				image_src_list: [],
				user: {
					nickname: "",
					avatar: "",
				},
			};
		},
		mounted() {
			this.add().then(c => {
				this.message = c.message
				this.image_src_list = c.image_src_list
				this.user  = c.user
			})
			// this.message = test_posts.message
			// this.image_src_list = test_posts.image_src_list
			// this.user= test_posts.user
		},
		methods: {
			async del() {
				await uni.request({
					method:"DELETE",
					url:getApp().globalData.base_url + "/del/post_message/" + this.post,
					header:{token: getApp().globalData.access_token}
				})
				this.$emit("del")
			},
			async add() {
				let cur_post;
				try {
					cur_post = await uni.request({
						url: getApp().globalData.base_url + "/get/post_message/" + this.post
					})
				} catch (error) {
					throw error
				}
				return cur_post.data;
			},
			
			to_post() {
				uni.navigateTo({
					url: "/pages/post_content/post_content?id=" + this.post
				})
			},
		}
	}
</script>

<style lang="scss">
	.main_container {
		width: 100vw;
		padding-bottom: 20px;
		.bg_img {
			margin: 0 auto;
			width: 90vw;
			padding: 2px;	
			// background: linear-gradient(to right, #aaaaff, #ffffff);
			border-radius: 17px;
			.message {
				min-height: 60px;
				margin: 0 auto;
				border: 2px;
				border-radius: 15px;
				padding: 15rpx;
				padding-top: 12rpx;
				background-color: rgb(231, 237, 254);
			}
		}
		.bg_img2 {
			width: 100%;
			height: 45px;
			color: #ffffff;
			font-size: 16px;
			padding-left: 10px;
			line-height: 43px;
			background-color: rgb(68, 119, 250);
			border-radius: 17.5px;
		}
	}
</style>